<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="author" content="wangrui"> 
    <title>简易日历</title>
   <style>
    *{
        /*保持标签总长不变*/
        box-sizing: border-box;
    }
    ul,li,h2,p{
        padding: 0;
        margin: 0;
    }
    .calender{
        width:250px;
        margin: 10px auto;
        background-color: #eee;
        padding: 5px;
    }
    .calender ul{
        overflow: hidden;
    }
    .calender li{
        list-style: none;
        width:50px;
        height: 50px;
        background-color: #333;
        border:1px solid #333;
        color: white;
        padding: 5px;
        margin: 5px;
        float:left;
        font-size: 14px;
        text-align: center;
        /*1.3倍的行高*/
        line-height: 1.3;
    }
    .calender li strong{
        display: block;
    }
    .calender li.active{
        background-color: red;
        color:#666;
        cursor:pointer;
    }
    .magess{
        border:1px solid white;
        margin: 5px;
        padding: 5px;
    }
    .magess h2{
        font-size: 14px;
    }
    </style>
</head>
<body>
    <div class="calender">
        <ul>
            <!--(li>strong{$})*12-->
            <li><strong>1</strong>JUN</li>
            <li class="active"><strong>2</strong>FEB</li>
            <li><strong>3</strong>MAR</li>
            <li><strong>4</strong>APR</li>
            <li><strong>5</strong>MAY</li>
            <li><strong>6</strong>JAN</li>
            <li><strong>7</strong>JUL</li>
            <li><strong>8</strong>AGU</li>
            <li><strong>9</strong>ESP</li>
            <li><strong>10</strong>DCT</li>
            <li><strong>11</strong>NOV</li>
            <li><strong>12</strong>DEC</li>
        </ul>
        <div class="massage">
            <h2><strong>2</strong>月节日</h2>
            <p>春节：2月2日至8日放假7天。</p>
        </div>

    </div>
</body>
</html>
<!--<script>
    var lis = document.querySelectorAll('.calender li');





    for(var i = 0;i<lis.length;i++){

        for

        console.log(i);
        
        this.className = 'active';
        strong.innerHTML = this.index+1;
        p.innerHTML = message[i];
    };


</script>-->